

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import Layout from '../../components/Layout';

interface FeedbackFormData {
  name: string;
  email: string;
  content: string;
}

const HelpCenterPage: React.FC = () => {
  const [expandedFaqItems, setExpandedFaqItems] = useState<Set<string>>(new Set());
  const [feedbackFormData, setFeedbackFormData] = useState<FeedbackFormData>({
    name: '',
    email: '',
    content: ''
  });

  const handleFaqToggle = (faqId: string) => {
    setExpandedFaqItems(prev => {
      const newSet = new Set(prev);
      if (newSet.has(faqId)) {
        newSet.delete(faqId);
      } else {
        newSet.add(faqId);
      }
      return newSet;
    });
  };

  const handleQuickLinkClick = (targetId: string) => {
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleOnlineServiceClick = () => {
    console.log('需要调用第三方接口实现在线客服功能');
    alert('在线客服功能即将开启，请稍后再试');
  };

  const handleFeedbackSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('提交反馈:', feedbackFormData);
    alert('感谢您的反馈，我们会尽快处理！');
    setFeedbackFormData({ name: '', email: '', content: '' });
  };

  const handleFeedbackChange = (field: keyof FeedbackFormData, value: string) => {
    setFeedbackFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  return (
    <Layout title="帮助中心 - 学途">
      <div className="min-h-screen bg-gray-50">
        <div className="max-w-4xl mx-auto px-6 py-8">
          {/* 页面头部 */}
          <div className="mb-8">
            <nav className="text-sm text-gray-600 mb-4">
              <Link to="/home" className="hover:text-blue-600 transition-colors">首页</Link>
              <span className="mx-2">/</span>
              <span className="text-gray-900">帮助中心</span>
            </nav>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">帮助中心</h1>
            <p className="text-gray-600">为您提供全面的使用指南和常见问题解答</p>
          </div>

          {/* 快速入口 */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">快速入口</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <button 
                onClick={() => handleQuickLinkClick('account-section')}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all cursor-pointer"
              >
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i className="fas fa-user text-blue-600 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">账户相关</h3>
                    <p className="text-gray-600 text-sm">注册、登录、密码找回</p>
                  </div>
                </div>
              </button>
              
              <button 
                onClick={() => handleQuickLinkClick('course-section')}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all cursor-pointer"
              >
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i className="fas fa-book text-green-600 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">课程相关</h3>
                    <p className="text-gray-600 text-sm">浏览、报名、学习课程</p>
                  </div>
                </div>
              </button>
              
              <button 
                onClick={() => handleQuickLinkClick('payment-section')}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all cursor-pointer"
              >
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i className="fas fa-credit-card text-purple-600 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">支付相关</h3>
                    <p className="text-gray-600 text-sm">支付方式、退款说明</p>
                  </div>
                </div>
              </button>
            </div>
          </section>

          {/* 常见问题 */}
          <section className="mb-12" id="account-section">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">常见问题</h2>
            
            <h3 className="text-lg font-medium text-gray-900 mb-4">账户相关</h3>
            <div className="space-y-4 mb-8">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <button
                  onClick={() => handleFaqToggle('faq-1')}
                  className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors"
                >
                  <span className="font-medium text-gray-900">如何注册学途账户？</span>
                  <i className={`fas fa-chevron-down text-gray-400 transition-transform ${expandedFaqItems.has('faq-1') ? 'rotate-180' : ''}`}></i>
                </button>
                {expandedFaqItems.has('faq-1') && (
                  <div className="px-6 pb-4 border-t border-gray-100">
                    <p className="text-gray-600">您可以通过以下步骤注册学途账户：</p>
                    <ol className="list-decimal list-inside mt-2 space-y-1 text-gray-600">
                      <li>点击页面右上角的"注册"按钮</li>
                      <li>填写手机号码和验证码</li>
                      <li>设置登录密码</li>
                      <li>完善个人信息</li>
                      <li>验证邮箱（可选）</li>
                    </ol>
                  </div>
                )}
              </div>

              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <button
                  onClick={() => handleFaqToggle('faq-2')}
                  className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors"
                >
                  <span className="font-medium text-gray-900">忘记密码怎么办？</span>
                  <i className={`fas fa-chevron-down text-gray-400 transition-transform ${expandedFaqItems.has('faq-2') ? 'rotate-180' : ''}`}></i>
                </button>
                {expandedFaqItems.has('faq-2') && (
                  <div className="px-6 pb-4 border-t border-gray-100">
                    <p className="text-gray-600">如果您忘记了密码，可以通过以下方式找回：</p>
                    <ol className="list-decimal list-inside mt-2 space-y-1 text-gray-600">
                      <li>在登录页面点击"忘记密码"</li>
                      <li>输入注册时的手机号码</li>
                      <li>获取短信验证码</li>
                      <li>设置新密码</li>
                    </ol>
                  </div>
                )}
              </div>
            </div>

            <h3 className="text-lg font-medium text-gray-900 mb-4" id="course-section">课程相关</h3>
            <div className="space-y-4 mb-8">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <button
                  onClick={() => handleFaqToggle('faq-3')}
                  className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors"
                >
                  <span className="font-medium text-gray-900">如何搜索和筛选课程？</span>
                  <i className={`fas fa-chevron-down text-gray-400 transition-transform ${expandedFaqItems.has('faq-3') ? 'rotate-180' : ''}`}></i>
                </button>
                {expandedFaqItems.has('faq-3') && (
                  <div className="px-6 pb-4 border-t border-gray-100">
                    <p className="text-gray-600">您可以通过以下方式搜索和筛选课程：</p>
                    <ul className="list-disc list-inside mt-2 space-y-1 text-gray-600">
                      <li>使用顶部搜索框输入关键词</li>
                      <li>按课程类别筛选</li>
                      <li>按难度级别筛选</li>
                      <li>按学期筛选</li>
                    </ul>
                  </div>
                )}
              </div>
            </div>

            <h3 className="text-lg font-medium text-gray-900 mb-4" id="payment-section">支付相关</h3>
            <div className="space-y-4">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <button
                  onClick={() => handleFaqToggle('faq-4')}
                  className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors"
                >
                  <span className="font-medium text-gray-900">支持哪些支付方式？</span>
                  <i className={`fas fa-chevron-down text-gray-400 transition-transform ${expandedFaqItems.has('faq-4') ? 'rotate-180' : ''}`}></i>
                </button>
                {expandedFaqItems.has('faq-4') && (
                  <div className="px-6 pb-4 border-t border-gray-100">
                    <p className="text-gray-600">学途目前支持以下支付方式：</p>
                    <ul className="list-disc list-inside mt-2 space-y-1 text-gray-600">
                      <li>微信支付</li>
                      <li>支付宝</li>
                      <li>银行卡支付</li>
                    </ul>
                  </div>
                )}
              </div>
            </div>
          </section>

          {/* 联系客服 */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">联系客服</h2>
            <div className="bg-white rounded-xl shadow-lg p-8">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                <div>
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i className="fas fa-phone text-blue-600 text-2xl"></i>
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">电话咨询</h3>
                  <p className="text-gray-600 text-sm mb-2">工作日 9:00-18:00</p>
                  <p className="text-blue-600 font-bold">400-123-4567</p>
                </div>
                
                <div>
                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i className="fas fa-envelope text-green-600 text-2xl"></i>
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">邮箱咨询</h3>
                  <p className="text-gray-600 text-sm mb-2">24小时内回复</p>
                  <p className="text-green-600 font-bold">support@xuetu.com</p>
                </div>
                
                <div>
                  <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i className="fas fa-comments text-purple-600 text-2xl"></i>
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">在线客服</h3>
                  <p className="text-gray-600 text-sm mb-2">工作日 9:00-21:00</p>
                  <button 
                    onClick={handleOnlineServiceClick}
                    className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
                  >
                    立即咨询
                  </button>
                </div>
              </div>

              {/* 意见反馈 */}
              <div className="mt-8 pt-8 border-t border-gray-200">
                <h3 className="font-semibold text-gray-900 mb-4 text-center">意见反馈</h3>
                <p className="text-gray-600 text-center mb-6">如果您有任何建议或意见，欢迎随时告诉我们</p>
                
                <form onSubmit={handleFeedbackSubmit} className="max-w-md mx-auto space-y-4">
                  <div>
                    <label htmlFor="feedback-name" className="block text-sm font-medium text-gray-900 mb-2">姓名</label>
                    <input
                      type="text"
                      id="feedback-name"
                      value={feedbackFormData.name}
                      onChange={(e) => handleFeedbackChange('name', e.target.value)}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="请输入您的姓名"
                      required
                    />
                  </div>
                  
                  <div>
                    <label htmlFor="feedback-email" className="block text-sm font-medium text-gray-900 mb-2">邮箱</label>
                    <input
                      type="email"
                      id="feedback-email"
                      value={feedbackFormData.email}
                      onChange={(e) => handleFeedbackChange('email', e.target.value)}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="请输入您的邮箱"
                      required
                    />
                  </div>
                  
                  <div>
                    <label htmlFor="feedback-content" className="block text-sm font-medium text-gray-900 mb-2">反馈内容</label>
                    <textarea
                      id="feedback-content"
                      value={feedbackFormData.content}
                      onChange={(e) => handleFeedbackChange('content', e.target.value)}
                      rows={4}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="请详细描述您的问题或建议"
                      required
                    />
                  </div>
                  
                  <button
                    type="submit"
                    className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
                  >
                    提交反馈
                  </button>
                </form>
              </div>
            </div>
          </section>
        </div>
      </div>
    </Layout>
  );
};

export default HelpCenterPage;

